Allow for custom preview blocks in demos. The current solution focuses heavily on a single jsx element, not configurable. For Toolpad we're in need of more flexibility. This PR proposes the extraction of previews using // preview-start and // preview-end comment blocks. This allows for marking custom ranges as preview for demos, e.g.

import { useMyHook } from '@lib'

export default function () {
  // preview-start
  const result = useMyHook()
  // preview-end

  return <div>{result}</div>
}

Will result in a preview of

const result = useMyHook()

instead of

<div>{result}</div>

We can clean up the full demo in the markdownloader and remove the lines containing // preview-start and // preview-end. Additionally {/* preview-start */} and {/* preview-end */} are also supported to allow previewing specific JSX.

It's also possible to delineate multiple preview blocks. They will get joined in the preview by a // ...

Examples can be seen here: https://deploy-preview-3558--mui-toolpad-docs.netlify.app/toolpad/core/components/notifications/

tagging @mui/docs-infra wdyt?

Notes:

• For now I implemented the solution in the babel plugin, but it probably can be done in the formattedTsDemos script.
• We should probably move the script to core repo and not duplicate it in every project
• edit: looks like multiple preview blocks breaks editing the preview

Also in this PR: run check in CI for formatted demos